<template>
	<view class="thepatient">
		<view class="thepatient_">
			<view class="items" v-for="(item,index) in patientList">

				<view class="l" @click="confirmThePatient(item)">
					<view class="left">
						<!-- <view class="yuan"></view> -->
						<radio-group @change="chan">
							<label>
								<radio value="item" />
							</label>
						</radio-group>

					</view>
					<view class="center">
						<view class="box">
							<text class="names">{{item.name}}</text>
							<text class="phines">{{item.phone}}</text>
						</view>
						<view class="address">
							<text v-if="item.sex==1">男</text>
							<text v-else>女</text>
							{{item.age}}岁 {{item.address}}
						</view>
					</view>
				</view>
				<view class="right">
					<navigator :url="'/pages/shops/subs_appointment/addpatient/index?id='+item.id"
						class='acea-row row-between-wrapper input' hover-class="none">
						<view class="edit"> <text class="iconfont icon-bianji3"></text> 编辑</view>
					</navigator>
					<view @click.stop="clickDelete(item.id)"><text class="iconfont icon-shanchu3"></text> 删除</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 120upx;">
			
		</view>
		<view class="addbutton" @click="addthepatient">添加就诊人</view>


		<view v-show="show" @click="boxshow">
			<view class="popup-info">
				<view class="tankuang1" @click.stop="addcontent">
					<view class="uni-column">
						<view class="title"> <text>确认要删除就诊人</text></view>

					</view>
					<view class="bottom_button">
						<button class="left" type="default" @click.stop="cancel">取消</button>
						<button class="right" type="default" @click.stop="confirm">确认</button>
					</view>
				</view>

			</view>
		</view>



	</view>
</template>

<script>
	import {
		thePatient,
		postDelete
	} from '@/api/appointment.js';
	import {
		mapGetters
	} from "vuex";

	export default {
		computed: {
			...mapGetters(['routeError']),
		},
		data() {

			return {
				patientList: {},
				id: "",
				show: false,
				testdata: {
					id: null,
					name: ''
				}
			}
		},
		onShow() {
			this.thePatientList()
		},
		onLoad() {
			if(this.routeError) {
				this.$store.commit('GO_ERROR');
				return
			}
			// this.thePatientList()
		},

		methods: {
			//点击遮罩层
			boxshow() {
				this.show = false
			},
			addcontent() {
				this.show = true
			},
			//点击取消按钮
			cancel() {
				this.show = false
			},
			thePatientList: function() {
				var that = this;
				this.pageloading = true
				thePatient({}).then(res => {
					this.patientList = res.data
				}).catch(err => {
					console.log(err)
					that.pageloading = false
					that.$util.Tips({
						title: err
					})
				});
			},
			// 添加就诊人
			confirmThePatient(i) {
				this.testdata.id = i.id
				var str = i.name
				str = str.substr(0, 1)
				this.testdata.name = str

				uni.$emit('updateData', this.testdata)
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			//删除点击获取id
			clickDelete(id) {
				this.id = id
				this.show = true
			},
			//确认删除
			confirm() {
				var that = this
				postDelete({
					id: that.id
				}).then(res => {
						that.show = false
						that.thePatientList()
						that.$util.Tips({
							title: '删除成功',
							icon: 'success'
						})
					},
					error => {
						that.$util.Tips({
							title: error
						})
					}
				);
			},
			addthepatient() {
				uni.navigateTo({
					url: '/pages/shops/subs_appointment/addpatient/index',
				});
			},
			chan(e) {
				// this.activeRadio = e.detail.value;
				console.log(this.activeRadio);
			}
		}
	}
</script>

<style lang="scss">
	.popup-info {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		width: 100%;
		height: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30upx;
		padding: 40upx;
		border-radius: 20upx;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;

		.tankuang1 {
			border-radius: 10upx;
			width: 600upx;
			// height: 240upx;
			padding: 50upx 20upx 0 20upx;
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			z-index: 9999;

			.title {
				text-align: center;
			}

			.uni-column {}

			.bottom_button {
				margin-top: 60upx;
				width: 100%;

				border-top: 1upx solid #CECECE;
				display: flex;
				justify-content: space-around;

				.left {
					border-right: 1upx solid #CECECE;
				}

				.right {
					color: rgb(0, 122, 255);
				}

				button {
					height: 100%;
					font-size: 34upx;
					width: 50%;
					line-height: 80upx;
				}
			}
		}
	}

	.addbutton {
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 120upx;
		background-color: $yy-main-col;
		color: #FFFFFF;
		font-size: 36upx;
		text-align: center;
		line-height: 120upx;
	}

	.thepatient {
		.thepatient_ {
			padding: 20upx;
		}

		.items {
			display: flex;
			justify-content: space-around;
			height: 160upx;
			margin-bottom: 20upx;
			border-radius: 10upx;
			background-color: #FFFFFF;

			.l {
				display: flex;
			}

			.left {
				display: flex;

				radio-group {
					margin-right: 20upx;
					display: flex;
					align-items: center;
				}

				.yuan {
					width: 30upx;
					height: 30upx;
					margin-right: 14upx;
					border: 2upx solid #3E3E3E;
					border-radius: 50%;
				}

				.names {
					font-size: 33upx;
					margin-right: 10upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #3E3E3E;
				}

			}

			.center {
				margin-top: 30upx;

				width: 320upx;

				.box {
					margin-bottom: 10upx;

					.names {
						color: #3E3E3E;
						font-size: 36upx;
					}

					.phines {
						font-size: 28upx;
						color: #3E3E3E;

					}
				}

				.address {

					font-size: 22upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #9C9C9C;
					word-break: keep-all;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				text {
					margin-right: 6upx;
				}

				// margin-top: 20upx; 
				// margin-bottom: 20uox;
				.edit {}
			}
		}
	}
</style>
